<template>
  <section class="development-offline-box" v-if="show">
    <div class="pop-w-box absolute-center">
      <div class="close-box pr">
        <span class="inline-block pa" @click="handleCancel"></span>
      </div>
      <div class="text text-c pr">
        <p class="clamp2 fs14">你的推荐人是“{{userData.nickname}}”</p>
        <p class="phone fs12" v-if="userData.phone">（手机号：{{userData.mobile | iscollect}}）</p>
        <p class="pop-text pa fs12">
          <i class="iconfont iconguanyuSOFOx pr"></i> 购买后将永久无法更变
        </p>
      </div>
      <div class="btn-box fs15">
        <span class="text-c" @click="handleCancel">取消推荐</span>
        <span class="text-c" @click="handleBuy">立即购买</span>
      </div>
    </div>
  </section>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {

      }
    },
    props:['show','userData'],
    filters:{
      iscollect(val){
        val = String(val)
        val = val.substring(0,3) + '****' + val.substring(8,11);
        return val
      },
    },
    methods: {
      //立即购买
      handleBuy(){
        this.$emit('handleBuy')
      },
      //取消推荐
      handleCancel(){
        this.$emit('handleCancel')
      }
    },
  }
</script>

<style scoped lang="scss">
  @import "../assets/css/base.scss";
  .development-offline-box{
    position: fixed;
    top:0;
    left:0;
    background:rgba(0,0,0,.5);
    width: 100%;
    height: 100%;
    z-index: 100;

    .pop-w-box{
      background: url("../assets/img/bg_developmentOffline.png") no-repeat;
      background-size: 100%;
      width: 80%;
      height: 280px;
      top: 45%;

      .close-box{
        width: 100%;
        height: 31%;
        /*border: 1px solid #000;*/

        span{
          top:0;
          right:0;
          width: 24px;
          height: 24px;
        }
      }

      .text{
        width: 100%;
        height: 40%;
        /*border: 1px solid #000;*/
        padding: 10px 28px;
        box-sizing: border-box;
        color: #624426;

        .phone{
          margin-top: 3px;
        }

        .pop-text{
          bottom:0;
          left:50%;
          transform: translateX(-50%);
          width: 100%;
          color: #ECD19F;

          i{
            top:1px;
            left:0;
          }
        }
      }

      .btn-box{
        width: 100%;
        height: 28%;
        /*border: 1px solid #000;*/
        padding: 10px 15px;
        box-sizing: border-box;
        color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span{
          background-color: #2E303C;
          width: 46%;
          height: 40px;
          line-height: 40px;
          border-radius: 22px;
        }

        span:last-child{
          background-color: #ECD19F;
          color: #383942;
        }
      }
    }
  }

  @media screen and (device-width: 376px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3){
    /*@media screen and (min-width: 376px) and (max-width: 414px){*/
    .development-offline-box{
      .pop-w-box{
        height: 307px;
      }

      .close-box {
        height: 35%;
      }

      .text{
        height: 35%;
      }
    }
  }

  @media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){
    /*.development-offline-box{*/
    .close-box {
      height: 25% !important;;
    }

    .text{
      height: 35% !important;;
    }
    /*}*/
  }
</style>
